.city-table-box{ width: 300px; padding: 10px; border: 1px solid #d9d9d9; background-color: #ffffff; font-size: 14px; }
.city-table-box>p{ color: #ccc; }
.city-table-box>#letters{ margin: 10px 0 10px 0; border-bottom: solid #ccc 1px; }
.city-table-box>#letters>span{ margin-right: 10px; cursor: pointer; }
.city-table-box>#letters>span:hover{ color: #1485f0; }
.city-table-box>#letters>span[data-selected=true]{ color: #1485f0; }
.city-table-box>#citys>div>p{ margin-top: 10px; color: #1485f0; }
.city-table-box>#citys>div>div{ margin-left: 10px; } 
.city-table-box>#citys>div>div>span{ display: inline-block; width: 60px; margin-right: 5px; cursor: pointer; text-align: center; }
.city-table-box>#citys>div>div>span:hover{ background-color: #1485f0; color: #ffffff; }